<template>
  <div class="select-main">
    <div class="main">
      <!-- 中间核心部分 -->
      <div class="mid">
        <div class="mid-inside">
          <!-- 内部第一行 -->
          <div class="inside-top">
            <div>
              <div class="top-title">发布</div>
              <p class="top-tips first-tip">
                通过编辑内容或关键词规则，快速进行编辑发布
              </p>
            </div>
          </div>
          <div class="inside-main">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="文字" name="first"><Character ref="form" content-type="1" /></el-tab-pane>
              <el-tab-pane label="图片" name="second"><MyMedia label-name="图片" content-type="2" /></el-tab-pane>
              <el-tab-pane label="音频" name="third"><MyMedia label-name="音频" content-type="3" /></el-tab-pane>
              <el-tab-pane label="视频" name="fourth"><MyMedia label-name="视频" content-type="4" /></el-tab-pane>
            </el-tabs>

            <div class="tool-bar">
              <button class="save-btn" @click="getDistribute()">保存</button>

              <!--              <div class="delete-btn-sec">
                <button class="delete-btn" @click="deleteReply()">删除回复</button>
                <div :class="this.delete === false?'hide':''" class="hide-delete-sec">
                  <div class="delete-sec-inner">
                    <div class="delete-inner-word">
                      删除后，关注该公众号的用户将不再接收该回复，确定删除？
                    </div>
                    <div class="delete-inner-button">
                      <div>
                        <button class="determine" @click="deleteDetermine()">确定</button>
                        <button class="cancle" @click="cancleDelete()">取消</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  deleteRuleById
} from '../../../api/officalAccount/request.js'
import emojiList from '../../../assets/officalAccount/emoji.js'
import Character from '../../../views/pisciculture/communityCommunication/Character.vue'
import MyMedia from '../../../views/pisciculture/communityCommunication/MyMedia.vue'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import communication from '@/api/pisciculture/communityCommunication'
import { add } from '../../../api/pisciculture/communityCommunication'
const defaultForm = { id: null, fileList: [], content: null, status: 'true' }

export default {
  cruds() {
    return CRUD({ title: '发布', url: 'api/community_communication', crudMethod: { ...communication }, query: { enabled: 'true' }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { Character, MyMedia },
  data() {
    return {
      form: {
        title: '',
        content: '',
        htmlContent: '',
        contentType: '',
        file: [] // 回显的数据 根据fileType判断文件类型 [{fileType:"",url:""}]
      },
      replyContent: '',
      delete: false,
      replyId: 0,
      emojiTest: {},
      activeName: 'first',
      loading: false,
      rules: {
        name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        file: [
          { required: true, message: '请上传媒体文件', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    surplus() {
      return 600 - this.form.content.length
    }
  },
  watch: {
    // 移除媒体文件校验
    'form.file': {
      handler(val) {
        if (val) {
          this.$refs.form.clearValidate('file')
        }
      },
      deep: true
    }
  },
  created() {
    this.emojiTest = emojiList
  },
  mounted() {},
  methods: {
    addEmoji(id) {
      const emoji = this.emojiTest.emoji[id]
      this.form.content += emoji
    },
    getDistribute() {
      // this.$store.commit('distribute/SET_CONTENTTYPE', '1')
      var formData = this.$store.state.distribute.distributeForm
      const fileIds = []
      // console.log('formData', formData)
      if (formData.fileIds.length > 0) {
        for (let i = 0; i < formData.fileIds.length; i++) {
          fileIds.push(formData.fileIds[i].fileId)
        }
      }
      formData['fileIds'] = fileIds
      formData = JSON.stringify(this.$store.state.distribute.distributeForm)
      console.log('formData', formData)
      this.$refs.form.validataForm((formData) => {
        // console.log('formData1', formData)
        // 保存
        add(formData).then(res => {
          console.log(res)
          this.$message({
            message: res.data,
            type: 'success'
          })
        })
        // 导航标签清除
        this.$store.dispatch('tagsView/delView', { name: '发布', path: '/communityCommunication/distribute' })
        // 重置表单
        this.$store.commit('distribute/RESET_DISTRIBUTEFORM')
        // 路由跳转
        this.$router.push('/pisciculture/communityCommunication')
      }, formData)
      /* const info = document.getElementById('edit-area').innerText
      const content = [{
        'type': 'text',
        'content': info
      }]
      const params = {
        category: 1,
        content: JSON.stringify(content)
      }
      console.log(typeof params.content)
      addMessageAndFollowRule(params).then(res => {
        console.log(res)
        window.location.reload()
      })*/
    },
    deleteReply() {
      this.delete = true
    },
    cancleDelete() {
      this.delete = false
    },
    deleteDetermine() {
      this.deleteOn = 1
      deleteRuleById(this.replyId).then(res => {
        console.log(res)
        window.location.reload()
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSubmit() {
      this.$refs.Form.validate((val) => {
        if (val) {
          this.loading = true
          try {
            console.log('form', this.form)
          } catch (error) {
            console.log(error)
          } finally {
            this.loading = false
          }
        }
      })
    },
    handleClose() {
      console.log('关闭表单')
    }
  }
}
</script>

<style scoped="scoped">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a,button {
        cursor: pointer;
    }

    .hide {
        display: none;
    }

    .select-main {
        width: 1290px;
        height: 990px;
    }

    .main {
        width: 90%;
        height: 100%;
        margin: 0 auto;
    }

    .mid {
        display: inline-block;
        width: 1080px;
        margin-bottom: 30px;
        margin-top: 40px;
        padding: 24px 40px;
        background-color: #fff;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    /* 中部头部部分 */
    .inside-top {
        position: relative;
        padding: 16px 100px 16px 0;
    }

    .top-title {
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
    }

    .first-tip {
        padding-top: 7px;
    }

    .top-tips {
        margin-top: 3px;
        font-size: 14px;
        color: #9a9a9a;
    }

    .top-tips a {
        text-decoration: none;
        color: #576B95;
    }

    /* 关键词回复主体内容部分 */
    .inside-main {
        padding-top: 40px;
        margin-top: 15px;
        border-top: 1px solid #E4E8EB;
    }

    .tool-bar {
        margin-top: 40px;
        padding-bottom: 65px;
    }
    .tool-bar button {
        margin-right: 1.2em;
        display: inline-block;
        padding: 0 22px;
        min-width: 54px;
        line-height: 2.42857143;
        vertical-align: middle;
        text-align: center;
        text-decoration: none;
        border-radius: 3px;
        font-size: 14px;
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
        box-sizing: content-box;
    }
    .save-btn {
        background-color: #07C160;
        border-color: #07C160;
        color: #FFFFFF;
    }
    .delete-btn-sec {
        position: relative;
        display: inline-block;
    }
    .delete-btn {
        background-color: #F5F6F6;
        border-color: #E4E8EB;
        color: #CCCDCD;
    }
    .hide-delete-sec {
        right: 50%;
        margin-right: -38px;
        top: 100%;
        padding-top: 5px;
        width: 280px;
        position: absolute;
        z-index: 500;
        text-align: left;
        color: #353535;
        line-height: 1.6;
        white-space: normal;
        word-wrap: break-word;
        font-size: 14px;
    }
    .delete-sec-inner {
        position: relative;
        padding: 24px;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }
    .delete-sec-inner::before {
        right: 42px;
        top: -4px;
        content: " ";
        width: 8px;
        height: 8px;
        background-color: #FFFFFF;
        box-shadow: 0 -10px 10px 0 #D4D4D4;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: absolute;
    }
    .delete-inner-button {
        margin-top: 24px;
        text-align: center;
    }
    .delete-inner-button button {
        margin: 0 7px;
        display: inline-block;
        padding: 0 22px;
        min-width: 54px;
        line-height: 2.42857143;
        vertical-align: middle;
        text-align: center;
        text-decoration: none;
        border-radius: 3px;
        font-size: 14px;
        cursor: pointer;
        border-width: 1px;
        border-style: solid;
        box-sizing: content-box;
    }
    .determine {
        background-color: #07C160;
        border-color: #07C160;
        color: #FFFFFF;
    }
    .cancle {
        background-color: #FBFBFB;
        border-color: #E4E8EB;
        color: #353535;
    }
</style>
